<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书借阅管理系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" type="text/css" href="../statics/fonts2/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../statics/css2/util.css">
    <link rel="stylesheet" type="text/css" href="../statics/css2/main.css">
    <link rel="stylesheet" type="text/css" href="../statics/css/verify.css">
	<link href="../statics/css/style.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="wrap-register">
        <div class="wrap-form-title" style="background-image: url(../images/new/cloud.jpg);">
            <span class="form-title">注  册</span>
        </div>
        <form id="from1" class="login-form validate-form" th:action="@{/login}" th:method="post">

            <div class="wrap-input validate-input m-b-26" data-validate="用户名不能为空">
                <span class="label-input">用户名:</span>
                <input class="input" type="text" id="username" onkeyup="userCheck()" onclick="userCheck()" placeholder="请输入6-12位字符，不能有空格">
                <span id="s_username" class="help-block"  ></span>
            </div>
            <div class="wrap-input validate-input m-b-18" data-validate="密码不能为空">
                <span class="label-input">密&nbsp;&nbsp;&nbsp;码:</span>
                <input class="input" type="password" id="password1" placeholder="请输入密码">
                <span id="s_password1" class="focus-input"></span>
            </div>
			<div class="wrap-input validate-input m-b-18" data-validate="密码不能为空">
			    <span class="label-input">确认密码:</span>
			    <input class="input" type="password" id="password2" placeholder="请再次输入密码" οnkeyup="checkpassword()>
			    <span id="s_password2" class="focus-input"></span>
			</div>
			
			<div class="wrap-input validate-input m-b-18" >
			    <span class="label-input">用户邮箱:</span>
			    <input class="input" type="text" id="email" placeholder="请输入邮箱">
			    <span class="focus-input"></span>
			</div>
             
			 <div class="flex-sb-m w-full p-b-30">
			     <div class="contact-form-checkbox">
			     </div>
			     <div>
			         <a href="../index.html" class="txt1">已有账号？立即登录</a>
			     </div>
			 </div>
            <div class="wrapper-form-btn">
                <button class="login-form-btn" id="btn" type="button">提 交</button>
            </div>
            <div id="mpanel4" style="margin-top:50px;">
            </div>
        </form>
    </div>
</div>

<script src="../statics/js2/jquery-3.2.1.min.js"></script>
<script src="../statics/js2/main.js"></script>
<!-- <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js" ></script>-->
<script src="../statics/js2/crypto-js.js"></script>
<script src="../statics/js2/ase.js"></script>
<script src="../statics/js2/verify.js"></script>

<script>

	function userCheck(){
		var username = $("#username").val();
		if (username == null || username == "") {
		    show_validate_msg("#username", "error", "不能为空");
		    return false;
		} else if(username.length >=6 && username.length <= 12) {
		    show_validate_msg("#username", "success", "输入合法");
		}else{
			show_validate_msg("#username", "error", "输入长度错误");
			return false;
		}
		
	}

	function validate_jy_form() {
	    var borrowerName = $("#borrowerName").val();
	    var borrowerPhone = $("#borrowerPhone").val();
	    var phone = /^[0-9]{11}$/;
	    var beginDate = $("#beginDate").val();
	    var endDate = $("#endDate").val();
	    if (borrowerName == null || borrowerName == "") {
	        show_validate_msg("#borrowerName", "error", "不能为空");
	        return false;
	    } else {
	        show_validate_msg("#borrowerName", "success", "输入合法");
	    }
	    if (borrowerPhone == null || borrowerPhone == "") {
	        show_validate_msg("#borrowerPhone", "error", "不能为空");
	        return false;
	    } else if (!phone.test(borrowerPhone)) {
	        show_validate_msg("#borrowerPhone", "error", "手机号无效");
	        return false;
	    } else {
	        show_validate_msg("#borrowerPhone", "success", "输入合法");
	    }
	    if (beginDate == null || beginDate == "") {
	        show_validate_msg("#beginDate", "error", "不能为空");
	        return false;
	    } else {
	        show_validate_msg("#beginDate", "success", "输入合法");
	    }
	    if (endDate == null || endDate == "") {
	        show_validate_msg("#endDate", "error", "不能为空");
	        return false;
	    } else {
	        show_validate_msg("#endDate", "success", "输入合法");
	    }
	    return true;
	}



    //显示校验的验证信息
    function show_validate_msg(ele, status, msg) {
        //清除原先格式
        $(ele).parent().removeClass("has-success has-error");
        $(ele).next("span").text("");
        if ("success" == status) {
            $(ele).parent().addClass("has-success");
            $(ele).next("span").text(msg);
        } else if ("error" == status) {
            $(ele).parent().addClass("has-error");
            $(ele).next("span").text(msg);
        }
    }
    //var URL = 'http://localhost:8088';
    var URL = 'http://39.107.205.22:8088';

			// // 初始化验证码  弹出式
		    $('#mpanel4').pointsVerify({
				
					 
				baseUrl:URL,  //服务器请求地址,  
				containerId:'btn', // pop模式 必填 被点击之后出现行为验证码的元素id
				mode:'pop',
				imgSize : {       //图片的大小对象
		        	width: '400px',
		        	height: '200px',
				},
		        ready : function() {
		    	},
		        success : function(params) {
					//返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
                    // params为返回的二次验证参数 需要在接下来的实现逻辑回传服务器
                    // 例如: login($.extend({}, params))
                    var name =  document.getElementById("username").value
                    var pass = document.getElementById("password").value
                    var email =  document.getElementById("email").value
                    var birth = document.getElementById("birth").value

                    $.ajax({
                        url: URL + "/user/register",
                        type:"post",
                        data:{"username":name,"password":pass,"email":email,"birth":birth},
                        dataType:"json",
                        success:function(result){
                            window.location.href ="index.html"

                        }
                    })
		        },
		        error : function() {
		        }
		    });
			
			
</script>


</body>
</html>
